import type { TabsProps } from "antd";
import { Button, Space, Switch, Table, Tabs } from "antd";
import type { ColumnsType } from "antd/es/table";
import type { TableRowSelection } from "antd/es/table/interface";
import React, { useState } from "react";
import Buttom from "../../components/Content/buttom";
import Srarch from "../../components/Content/search";
import "../../style/updata/index.css";
import "./articlelist.css";
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string;
  tagss: string;
  sort: number;
}

const onChange = (checked: boolean) => {
  console.log(`switch to ${checked}`);
  message.success('状态切换成功');
};
const columns: ColumnsType<DataType> = [
  {
    title: "ID",
    dataIndex: "age",
    key: "age",
    render: (text) => <span>{text}</span>,
  },
  {
    title: "",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "所属分类",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "发布时间",
    key: "tags",
    dataIndex: "tags",
  },
  {
    title: "更新时间",
    key: "tagss",
    dataIndex: "tagss",
  },
  {
    title: "排序",
    key: "sort",
    dataIndex: "sort",
  },
  {
    title: "状态",
    render: (falg: boolean, render: any) => (
      <Switch
        checkedChildren="正常"
        unCheckedChildren="禁用"
        defaultChecked
        onChange={onChange}
        className="custom-switch"
      />
    ),
  },
  {
    title: "操作",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <Button
          style={{
            background: "#009688",
            color: "#fff",
            display: "block",
            textAlign: "center",
          }}
        >
          编辑
        </Button>
        <Button
          style={{
            background: "#FF5722",
            color: "#fff",
            display: "block",
            textAlign: "center",
          }}
        >
          删除
        </Button>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: "1",
    name: "斗罗大陆",
    age: 1,
    address: "New York No. 1 Lake Park",
    tags: "2018-12-13 10:10",
    tagss: "2023-12-13 10:10",
    sort: 1000,
  },
  {
    key: "2",
    name: "梅西",
    age: 2,
    address: "London No. 1 Lake Park",
    tags: "2012-12-13 12:10",
    tagss: "2023-12-13 12:10",
    sort: 1000,
  },
  {
    key: "3",
    name: "杰克",
    age: 3,
    address: "Sydney No. 1 Lake Park",
    tags: "2015-12-13 12:10",
    tagss: "2023-12-13 12:10",
    sort: 1000,
  },
  {
    key: "4",
    name: "高哥",
    age: 4,
    address: "New York No. 1 Lake Park",
    tags: "2015-12-13 12:10",
    tagss: "2023-12-13 12:10",
    sort: 1000,
  },
  {
    key: "5",
    name: "中国经济网-房产咨询",
    age: 5,
    address: "London No. 1 Lake Park",
    tags: "2015-12-13 12:10",
    tagss: "2023-12-13 12:10",
    sort: 1000,
  },
  {
    key: "6",
    name: "中国经济网-智慧城市",
    age: 6,
    address: "Sydney No. 1 Lake Park",
    tags: "2015-12-13 12:10",
    tagss: "2023-12-13 12:10",
    sort: 1000,
  },
];

const articlelist: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const items: TabsProps["items"] = [
    {
      key: "1",
      label: `文章管理`,
      children: (
        <>
          <Srarch />
          <Table
            bordered={true}
            columns={columns}
            dataSource={data}
            rowSelection={rowSelection}
            style={{ padding: "15px" }}
          ></Table>
          <Buttom />
        </>
      ),
    },
    {
      key: "2",
      label: `增加文章`,
      children: `Content of Tab Pane 2`,
    },
  ];

  return (
    <div className="faaafa">
      <div className="top">
        <Tabs defaultActiveKey="1" items={items} />
      </div>
    </div>
  );
};

export default articlelist;
